<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置页面的字符编码为UTF-8，这是HTML页面的基本配置项，能确保页面在不同浏览器中正确显示各种字符，避免出现乱码问题 -->
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!-- 引入基础样式表文件，通常该文件会包含一些通用的样式规则，例如全局的字体样式、页面元素的默认内外边距设置、颜色的基础设定等，用于统一整个网站各页面的基础外观风格 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入表单相关的样式表文件，主要针对页面中的表单元素（像输入框、按钮、提示信息等）进行特定样式的定制，使其呈现出符合设计要求的外观与布局效果 -->
    <link rel="stylesheet" href="../css/form.css">
</head>

<body>
    <!-- 页面头部区域的容器，使用了自定义的类名“header”和“container”，“header”一般用来明确这是页面头部的部分，“container”通常是让该元素在页面中水平居中显示，这里展示的文字是“修改密码”，表明页面的主题 -->
    <div class="header container">修改密码
        <p style="display: block;">
            <!-- 提供一个链接，通过“a”标签实现，链接指向“./index.html”页面，也就是首页，“display: block;”样式将该“p”元素设置为块级元素，使其独占一行显示，方便布局和样式控制，用户点击该链接可以返回首页 -->
            <a href="./index.html">回到首页</a>
        </p>
    </div>
    <form>
        <!-- 用于显示修改密码过程中出现错误时的提示信息，添加“error”类名便于后续在 CSS 文件中对这类错误提示信息统一设置样式，比如将文字颜色设置为显眼的红色，使其更醒目，让用户能快速察觉到修改密码操作出现了问题 -->
        <span class="error">修改密码错误！</span>
        <label>
            <!-- 原始密码输入框的标签及对应的输入框元素，“oldpassword”类名可用于在 CSS 样式表中为该输入框定制特定的样式，例如规定其宽度、高度、边框样式等外观属性，输入框类型为“text”，此处可考虑改为“password”类型以增强安全性，让用户输入原始密码 -->
            原始密码： <input type="text" class="oldpassword">
        </label>
        <label>
            <!-- 新密码输入框的标签及对应的输入框元素，“newpassword”类名用于在 CSS 中对其样式进行定制，同样输入框类型目前是“text”，更合适的做法是改为“password”类型，方便用户输入想要修改成的新密码内容 -->
            新密码： <input type="text" class="newpassword">
        </label>
        <label>
            <!-- 确认新密码输入框的标签及对应的输入框元素，“rnewpassword”类名便于在 CSS 里设置其样式，输入框类型为“text”（建议改为“password”类型），用于让用户再次输入新密码，以便后续进行两次输入的新密码是否一致的验证操作 -->
            确认新密码： <input type="text" class="rnewpassword">
        </label>
        <button>确认修改</button>
    </form>
    <!-- 引入与修改密码功能相关的 JavaScript 脚本文件，采用模块类型（type="module"），意味着该脚本文件内部大概率运用了 ES6 模块语法来组织代码，便于进行代码的模块化管理，在这个脚本中通常会包含如表单数据验证（像检查原始密码是否正确、两次新密码是否一致等）、向服务器发送修改密码请求等相关的业务逻辑代码 -->
    <script src="../js/rpwd.js" type="module"></script>
</body>

</html>